<template>
  <div class="full-page !h-auto">
    <!-- 柱形图 -->
    <div class="flex justify-between items-center mb-5">
      <span class="min-w-[100px] font-[600] text-lg text-black">收回金额</span>
      <TopFilter class="flex-wrap" :model="paramsA" :filters="filtersA" @change="getDataA()" />
    </div>
    <Bar class="w-[100%] h-[300px]" ref="barRef" v-loading="loadingA"></Bar>

    <!-- 饼图和动态 -->
    <TopFilter class="mt-4" :model="paramsB" :filters="filtersB" @change="getDataBC" />
    <div class="flex mt-5">
      <div class="flex flex-4/6" v-loading="loadingB">
        <Pie class="w-1/4 aspect-square" ref="pieRef1"></Pie>
        <Pie class="w-1/4 aspect-square" ref="pieRef2"></Pie>
        <Pie class="w-1/4 aspect-square" ref="pieRef3"></Pie>
        <Pie class="w-1/4 aspect-square" ref="pieRef4"></Pie>
      </div>
      <div class="flex-2/6">
        <span class="font-[600] text-lg text-black">项目动态</span>
        <div class="max-h-[36vh] mt-4 pt-6 px-6 bg-[#f1f1f1] rounded-[6px] overflow-y-auto">
          <div v-for="dynamic in dynamicsList" class="mb-6 text-sm border-b pb-6 border-zinc-300"
            v-infinite-scroll="loadMore" :infinite-scroll-disabled="loadingC" :infinite-scroll-distance="10">
            <div>{{ dynamic.company_name }}&nbsp;&nbsp;&nbsp;{{ dynamic.community_name }}</div>
            <div class="mt-2 font-bold">{{ dynamic.remark }}</div>
            <div class="flex items-center justify-between mt-2">
              <div>{{ dynamic.add_user_name }}</div>
              <div class="text-xs text-zinc-400">{{ dynamic.add_time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { indexQ1, indexQ2, indexQ3 } from '@/api/index'
import { ref, onMounted } from 'vue'
import TopFilter from '@/components/CRUD/TopFilter.vue'
import Bar from './components/bar.vue'
import Pie from './components/pie.vue'
import { useCommonFilter } from '@/hooks/useCommonFilter'
import { useFilters } from '@/hooks'
import Dayjs from 'dayjs'

const now = Date.now();

//柱状图
const barRef = ref(null)
const { filters } = useCommonFilter(['company_id', 'community_id', 'department_id', 'user_id'])
const filtersA = [
  ...filters,
  {
    key: 'is_sort_by_month',
    type: 'select',
    value: false,
    options: [
      { label: '月', value: true },
      { label: '天', value: false },
    ],
    props: { clearable: false },
  },
  {
    key: 'data_range',
    type: 'datepicker',
    startKey: 'start_date',
    endKey: 'end_date',
    fixDay: true,
    value: [
      Dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
      Dayjs().format('YYYY-MM-DD'),
    ],
    props: {
      clearable: false,
      disabledDate: (time) => time > now
    },
    dynamicProps: (parmas) => {
      return {
        type: parmas.is_sort_by_month ? 'monthrange' : 'daterange',
        valueFormat: parmas.is_sort_by_month ? 'YYYY-MM' : 'YYYY-MM-DD',
      }
    }
  },

]
const { params: paramsA, getParams: getParamsA } = useFilters(filtersA)
const loadingA = ref(false)
const getDataA = async () => {
  loadingA.value = true
  try {
    const { data } = await indexQ1(getParamsA())
    // 处理数据
    barRef.value.initData(data)
  } catch (error) {
    console.error('获取数据A失败', error)
  } finally {
    loadingA.value = false
  }
}
getDataA()


//饼图
const pieRef1 = ref(null)
const pieRef2 = ref(null)
const pieRef3 = ref(null)
const pieRef4 = ref(null)
const filtersB = [
  {
    key: 'data_range',
    type: 'datepicker',
    startKey: 'start_date',
    endKey: 'end_date',
    value: [
      Dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
      Dayjs().format('YYYY-MM-DD'),
    ],
    props: {
      type: 'daterange',
      valueFormat: 'YYYY-MM-DD',
      clearable: false,
      disabledDate: (time) => time > now
    },
  },
]
const { params: paramsB, getParams: getParamsB } = useFilters(filtersB)
const loadingB = ref(false)
const getDataB = async () => {
  loadingB.value = true
  try {
    const { data } = await indexQ2(getParamsB())
    // 处理数据
    console.log(data);

    pieRef1.value.initData(
      '和解户数统计',
      Object.entries(data['和解户数统计']).map(([key, value]) => ({
        value,
        name: key,
      }))
    )
    pieRef2.value.initData(
      '和解金额统计',
      Object.entries(data['和解金额统计']).map(([key, value]) => ({
        value,
        name: key,
      }))
    )
    pieRef3.value.initData(
      '开庭统计',
      Object.entries(data['开庭统计']).map(([key, value]) => ({
        value,
        name: key,
      }))
    )
    pieRef4.value.initData(
      '有效/无效数据',
      Object.entries(data['有效/无效数据']).map(([key, value]) => ({
        value,
        name: key,
      }))
    )
  } catch (error) {
    console.error('获取数据B失败', error)
  } finally {
    loadingB.value = false
  }
}

//动态
const dynamicsList = ref([])
let page_num = 1;
let size = 10;
let total = 0;
const loadingC = ref(false)
const getDataC = async () => {
  loadingC.value = true
  try {
    const { data } = await indexQ3({
      page_num,
      size,
      ...getParamsB()
    })
    dynamicsList.value = dynamicsList.value.concat(data?.data_list || [])
    total = data?.total || 0;
  } catch (error) {
    console.error('获取动态数据失败', error)
  } finally {
    loadingC.value = false
  }
}
const loadMore = () => {
  if (dynamicsList.value.length < total) {
    page_num++;
    getDataC();
  }
}

const getDataBC = () => {
  getDataB()
  dynamicsList.value = []
  page_num = 1;
  total = 0;
  getDataC()
}
getDataBC()
</script>
